﻿﻿﻿﻿﻿﻿﻿
<template>
  <div class="login-page">
    <div class="login-container">
      <div class="login-hero">
        <div class="hero-tag">AI Chat Console</div>
        <h2>欢迎回到<span>智能工作台</span></h2>
        <p>
          统一管理对话、知识库与数据实验。登录后即可继续你的创作与分析流程。
        </p>
        <ul class="hero-features">
          <li>👉 多模型随时切换</li>
          <li>🔐 企业级安全登录</li>
          <li>⚡ Excel / 数据实验一站式处理</li>
        </ul>
      </div>
      <el-card class="login-card">
        <div class="login-card__header">
          <div class="brand-icon">🤖</div>
          <div>
            <h3>登录 AI Chat</h3>
            <p>{{ subtitle }}</p>
          </div>
        </div>
        <el-form
          class="login-form"
          label-position="top"
          @submit.prevent="handleLogin"
        >
          <el-form-item label="用户名">
            <el-input
              v-model="form.username"
              placeholder="请输入用户名"
              autocomplete="username"
              :disabled="loading || !authReady"
            />
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="form.password"
              type="password"
              placeholder="请输入密码"
              autocomplete="current-password"
              :disabled="loading || !authReady"
              @keyup.enter="handleLogin"
            />
          </el-form-item>
          <div class="login-actions">
            <el-button
              type="primary"
              :loading="loading"
              :disabled="!authReady"
              round
              @click="handleLogin"
            >
              登录
            </el-button>
          </div>
          <div class="form-footer" v-if="allowRegister">
            <span>还没有账号？</span>
            <router-link to="/register" class="register-link"
              >立即注册</router-link
            >
          </div>
          <p v-if="errorMessage" class="error-text">{{ errorMessage }}</p>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import apiClient from "@/api/api";
import { loadAuthConfig, getCachedAuthConfig } from "@/services/authService";

const router = useRouter();
const route = useRoute();

const form = reactive({
  username: "",
  password: "",
});
const loading = ref(false);
const errorMessage = ref("");
const allowRegister = ref(true);
const authReady = ref(false);
const subtitle = ref("");

const handleLogin = async () => {
  if (!authReady.value) return;
  const username = form.username.trim();
  if (!username || !form.password) {
    errorMessage.value = "请输入用户名和密码";
    return;
  }
  loading.value = true;
  errorMessage.value = "";
  try {
    const { data } = await apiClient.post("/v1/auth/login", {
      username,
      password: form.password,
    });
    localStorage.setItem("authToken", data.token);
    ElMessage.success("登录成功");
    const redirect =
      typeof route.query.redirect === "string" ? route.query.redirect : "/chat";
    router.replace(redirect);
  } catch (error: any) {
    errorMessage.value = error?.response?.data?.detail || "登录失败，请重试";
  } finally {
    loading.value = false;
  }
};

const initAuthConfig = async () => {
  try {
    const config = await loadAuthConfig();
    allowRegister.value = config.allow_register;
    if (!config.auth_required) {
      subtitle.value = "当前环境无需登录，即将跳转...";
      const redirect =
        typeof route.query.redirect === "string"
          ? route.query.redirect
          : "/chat";
      router.replace(redirect);
      return;
    }
    subtitle.value = "请使用您的账户登录";
  } catch (error) {
    console.warn("获取认证配置失败，使用缓存配置", error);
    const cached = getCachedAuthConfig();
    allowRegister.value = cached.allow_register;
  } finally {
    authReady.value = true;
  }
};

onMounted(() => {
  console.log("LoginView mounted");
  initAuthConfig();
});
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: radial-gradient(
      circle at top,
      rgba(147, 197, 253, 0.4),
      transparent 55%
    ),
    linear-gradient(135deg, #eef2ff 0%, #dbeafe 60%, #e0e7ff 100%);
}

.login-container {
  width: 100%;
  max-width: 960px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  align-items: stretch;
}

.login-hero {
  background: #0f172a;
  border-radius: 24px;
  color: #f8fafc;
  padding: 48px 40px;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.4);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(147, 197, 253, 0.2);
  border: 1px solid rgba(147, 197, 253, 0.35);
  font-size: 14px;
}

.login-hero h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
}

.login-hero h2 span {
  color: #93c5fd;
}

.login-hero p {
  margin: 0;
  line-height: 1.7;
  color: #cbd5f5;
}

.hero-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  font-size: 15px;
}

.login-card {
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
  border: none;
}

.login-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.brand-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
}

.login-card h3 {
  margin: 0;
  font-size: 24px;
  color: #111827;
}

.login-card p {
  margin: 4px 0 0;
  color: #6b7280;
}

.login-form {
  margin-top: 12px;
}

.login-actions {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

.form-footer {
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #6b7280;
}

.register-link {
  color: #2563eb;
}

.error-text {
  margin-top: 12px;
  color: #ef4444;
  text-align: center;
}

@media (max-width: 640px) {
  .login-page {
    padding: 20px 16px;
  }

  .login-hero {
    padding: 28px;
  }

  .login-container {
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .login-page {
    padding: 16px 12px;
  }

  .login-container {
    max-width: 100%;
  }

  .login-hero {
    padding: 20px;
  }

  .login-hero h2 {
    font-size: 24px;
  }

  .login-card {
    margin: 0;
  }

  .login-card h3 {
    font-size: 20px;
  }
}
</style>
